﻿function imageLoaded(event) {
    var w = event.target.width;
    var h = event.target.height;
    var index = $(event.target).attr("alt");
    var dom = $("#nic_img_" + index);
    if (w > h) {
        $(dom).attr("width", "100");
        var m = (100 - (100 * (h / w))) / 2;
        $(dom).css("margin-top", m);
    }
    else if (h > w) {
        $(dom).attr("height", "100");
        $(dom).removeAttr("width");
        var m = (100 - (100 * (w / h))) / 2;
        $(dom).css("margin-left", m);
    }
    else {

    }
}
$(document).ready(function () {
    var nic_file = "";
    var template = "<div id=\"nic_panel\"></div>" +
	                            "<div id=\"nic_bottom\">" +
		                            "<div style=\"position:relative; height:60px; overflow:hidden; width:570px; text-align:left;\">" +
			                            "<div style=\"height:30px;\">" +
				                            "<form id=\"nic_form\" action=\"/api/memberservices/uploadpicture\" method=\"post\" enctype=\"\">" +
     					                        "<input type=\"file\" size=\"60\" name=\"file\" style=\"border:1px solid #454545; width:430px; float:	left; margin-top:2px;\">" +
     					                        "<input type=\"submit\" value=\"Upload lên server\" style=\"height:30px; cursor:pointer; float:right\">" +
				                            "</form>" +
			                            "</div>" +
 			                        "<div id=\"nic_progress\" style=\"width:570px; min-height:10px;\">" +
        		                        "<div id=\"nic_bar\" style=\"background-color:Teal; height:10px; width:0%; float:left;\"></div>" +
			                        "</div>" +
			                        "<div id=\"nic_percent\" style=\"text-align:center;\"></div >" +
		                        "</div>" +
                                "<div id=\"nic_select_text\"></div>" +
                                    "<div style=\"text-align:right\">" +
                                    "<button id=\"nic_delete_bnt\">Xóa hình</button>" +
                                    "<button id=\"nic_close_bnt\">Đóng</button>" +
                                    "<button id=\"nic_select_bnt\">Chọn hình</button>" +
                                "</div>" +
	                       "</div>";
    var imgTem = "<div class=\"nic_image\" style=\"float:left; margin:5px; width:100px; height:100px; background-color:#aaa;  position:relative\">" +
                                "<img id=\"nic_img_{id}\" src=\"{src}\" width=\"100px\"  alt=\"{alt}\" />" +
                        "</div>";



    function RefeshImage() {
        $.getJSON("/api/memberservices/getallpictures", function (data) {
            $('#nic_panel').empty();
            for (var i = 0; i < data.length; i++) {
                var image = imgTem.replace("{src}", "/memberpictures/" + data[i].fileName);
                image = image.replace("{alt}", data[i].fileName);
                image = image.replace("{id}", i);
                $('#nic_panel').append(image);
                var img = document.createElement('img');
                img.alt = i;
                img.onload = imageLoaded;
                img.style.display = 'none'; // If you don't want it showing
                img.src = "/memberpictures/" + data[i].fileName;
                document.body.appendChild(img);
            }

            $(".nic_image").click(function (event) {
                var fileName = $(event.target).find("img").attr("alt");
                $(".nic_image").removeClass("nic_image_selected");
                if (fileName == undefined) {
                    fileName = $(event.target).attr("alt");
                    $($(event.target).parent()).addClass("nic_image_selected");
                }
                else {

                    $(event.target).addClass("nic_image_selected");
                }
                nic_file = fileName;
                $("#nic_select_text").empty();
                $("#nic_select_text").append(fileName);
            });
        });
    }


    $(".nic_picbox button").click(function (event) {

        var parent = $(event.target).parent();
        $("body").append("<div class=\"nic_screen_mask\"></div>");
        var x = $(window).width();
        var y = $(window).height();
        $(".nic_screen_mask").css("width", x + "px");
        $(".nic_screen_mask").css("height", y + "px");
        $("body").append("<div class=\"nic_screen_popup\"></div>")
        if (x > 600) {
            var newleft = (x - 600) / 2;
            $(".nic_screen_popup").css("left", newleft + "px");
        }
        else {
            $(".nic_screen_popup").css("left", "0px");
        }

        if (y > 600) {
            var newtop = (y - 600) / 2;
            $(".nic_screen_popup").css("top", newtop + "px");
        }
        else {
            $(".nic_screen_popup").css("top", "0px");
        }

        $(".nic_screen_popup").append(template);

        RefeshImage();

        $("#nic_close_bnt").click(function () {
            $(".nic_screen_mask").remove();
            $(".nic_screen_popup").remove();
        });

        $("#nic_select_bnt").click(function () {
            var parent = $(event.target).parent();
            $(parent).find("input").val(nic_file);
            $(".nic_screen_mask").remove();
            $(".nic_screen_popup").remove();

        });

        $("#nic_delete_bnt").click(function () {

            if (confirm('Bạn có muốn xóa ảnh')) {
                if (nic_file != "") {
                    var url = "/api/memberservices/deletepicture/" + nic_file;
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function (data) {
                            RefeshImage();
                            nic_file = "";
                            $("#nic_select_text").empty();
                        }
                    });
                }
            }


        });



        var options = {
            beforeSend: function () {
                $("#nic_progress").show();
                //clear everything
                $("#nic_bar").width('0%');
                $("#nic_percent").html("0%");
            },
            uploadProgress: function (event, position, total, percentComplete) {
                $("#nic_bar").width(percentComplete + '%');
                $("#nic_percent").html(percentComplete + '%');
                if (percentComplete == 100) {
                    $("#nic_percent").html("<font color='green'>" + "Server đang lưu file..." + "</font>");
                }

            },
            success: function () {
                $("#nic_bar").width('100%');
                $("#nic_percent").html('100%');
                RefeshImage();
            },
            complete: function (response) {
                $("#nic_percent").html("<font color='green'>" + response.responseText + "</font>");
            },
            error: function () {
                $("#nic_percent").html("<font color='red'> ERROR: unable to upload files</font>");

            }

        };
        $("#nic_form").ajaxForm(options);


    });
});


